<template>
  <scroll-view scroll-y id="newsId">
    <!-- 当没有消息时会显示提示页面 -->
    <div class="pd_t_74" v-if="newsList.length == 0">
      <div class="news-img"><img src="../../static/img/news_bg.png"/></div>
      <div class="font-28 col-999 text-cent" style="text-align: center">暂时没有消息</div>
    </div>
    <!-- 有消息时会显示的页面 -->
    <div v-for="(item,index) in newsList" :key="index" v-else class="bg-fff mg_l_20 mg_r_20 mg_t_20"
         style="border-radius: 0.06rem;">
      <div class="row cont-center pd_t_19 pd_b_20 yh_bd_bottom">
        <div class="font-26 font-b col-333 pd_l_30 flex-1">{{item.title}}<span v-if="item.readStatus == 0"
                                                                               class="spot bg-FF6251 mg_l_10"></span>
        </div>
        <div class="pd_r_30 font-22 col-666">{{item.createTime}}</div>
      </div>
      <div id="newsText" class="font-24 col-333 pd_l_30 pd_r_30 pd_t_30 pd_b_30 yh_bd_bottom">
        <u-parse :html="item.content"></u-parse>
      </div>
      <div v-if="item.title == '限时抢购'" class="font-24 col-1f476d text-cent pd_t_19 pd_b_20">去抢购</div>
    </div>
  </scroll-view>
</template>

<script>
  import {request} from "../../util/api";

  export default {
    data() {
    	return {
    		newsList: []
      }
    },
    mounted() {
    	this.getNew()
      setTimeout(() => {
        this.readNews()
      }, 2000)
    },
    methods: {
	    getNew: function () {
		    request({
			    url: '/app/userCenter/getSystemMessages'
		    }).then(res => {
		    	this.newsList = res.data;
        })
	    },

      readNews() {
	      request({
          url: '/app/userCenter/markSystemMessage'
        }).then(ret => {
          console.log(ret)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    height: 100%;
    background: #F7F7F7;
  }
  #newsId {
    background: #F7F7F7;
    height: 100%;
    overflow: hidden;
  }
  .spot {
    width: 16upx;
    height: 16upx;
    border-radius: 50%;
    display: inline-block;
    background: #FF6251;
    margin-left: 10upx;
  }
  .pd_t_74 {
    padding-top: 150upx;
  }
  .news-img {
    width: 644upx;
    height: 390upx;
    margin: 0 auto;
    margin-top: 200upx;
    image {
      width: 100%;
      height: 100%;
    }
  }
</style>